<template>
    <div id="GoodsList">
        <!-- title -->
        <div class="title">
            <bread-crumb>商品列表</bread-crumb>
            <div class="select">
                <el-select v-model="goodsClass" @change="SelectChange" placeholder="请选择商品分类">
                    <el-option-group
                    v-for="group in classList"
                    :key="group.classname"
                    :label="group.classname">
                    <el-option
                        v-for="item in group.children"
                        :key="item._id"
                        :label="item.classname"
                        :value="item._id">
                    </el-option>
                    </el-option-group>
                </el-select>
            </div>
            <div class="btn">
                <el-button size="mini" type="success" @click="addBanner">添加商品</el-button>
            </div>
        </div>

        <!-- table -->
        <div class="table">
              <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="_id"
                border
                
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                prop="addtime"
                label="日期"
                align="center"
                sortable
               >
                </el-table-column>

                <el-table-column
                prop="mainImage"
                label="主图"
                align="center"
                sortable
                >
                    <template slot-scope="scope">
                        <div class="imgbox">
                            <img :src="scope.row.mainImage[0] ? scope.row.mainImage[0] : '' " alt="">
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                prop="title"
                align="center"
                label="商品标题">
                    <template slot-scope="scope">
                        <p style="font-size: 12px">{{ scope.row.title  }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                prop="price"
                align="center"
                label="商品价格">
                <template slot-scope="scope">
                        <el-tag size="mini" type="success"  >{{ scope.row.price }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                prop="sale"
                align="center"
                label="商品折扣">
                    <template slot-scope="scope">
                        <el-tag size="mini" type="danger"  >{{ scope.row.sale }}</el-tag>
                    </template>
                </el-table-column>


                <el-table-column
                prop="status"
                align="center"
                label="状态">
                    <template slot-scope="scope">
                        <el-button size="mini" :type="scope.row.status == 1 ? 'success' : 'danger' " :href="scope.row.link" target="_blank" @click="BannerChangeStatus(scope.row)" >{{ scope.row.status == 1 ? '显示' : '隐藏' }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column
                prop="status"
                align="center"
                label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"   @click="EditBanner(scope.row)" >修改</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--  分页 -->
        <div class="page">
            <el-pagination
            background
            layout="prev, pager, next"
            :current-page="CurrentPage"
            :page-size="PageSize"
            :current-change="onSizeChange"
            :total="total">
            </el-pagination>
        </div>

        <!-- <goods-class-dialog :DialogData="DialogData" :select="classList" :FormData="FormData" @update="getClassList" ></goods-class-dialog> -->

    </div>
</template>

<script>
    import BreadCrumb from "@/components/index/BreadCrumb"
    // import GoodsClassDialog from "@/components/dialog/GoodsClassDialog"
    export default {
        components: {
            BreadCrumb,
            // GoodsClassDialog
        },
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false
                },
                FormData: {},
                total:0,
                CurrentPage: 1,
                PageSize: 10,
                classList: [],
                goodsClass: ""
            }
        },
        mounted () {
            this.getGoodsList();
            this.getClassList(this.CurrentPage, this.goodsClass)
        },
        methods: {
            // 获取所有商品
            async getGoodsList( pages, goodClass ) {
                let page = pages ? pages : 1
                let goodsClass = goodClass ? goodClass : ""
                this.tableData = []
                this.FirstClassname = []
                let res = await this.$axios.post("/admin/ShowAllGoods", { page, goodsClass})
                //   console.log(res);
                let code = res.data.code 
                if (code == 200) {
                    this.tableData = res.data.data.allGoods
                    this.total = res.data.data.total
                    this.tableData.forEach(el => {
                        el.mainimg = el.mainImage[0] ? el.mainImage[0] : ""
                    })
                }
            },

            // 获取所有分类
 
            async getClassList() {
                
                this.classList = []
                
                let res = await this.$axios.post("/admin/ShowClass")
                //   console.log(res);
                let code = res.data.code 
                if (code == 200) {
                    this.classList = res.data.data.clas
                    this.total = res.data.data.total
                    
                }
            },
            // 改变状态
            async BannerChangeStatus( item ) {
                let id = item._id
                let beLong = item.beLong ? item.beLong : ""
                let res = await this.$axios.post("/admin/goodsStatusChange", { id , beLong })
                let code = res.data.code
                if(code == 204) {
                    this.$message.success("更新成功")
                    this.getGoodsList()
                } else {
                    this.$message.success("更新失败")
                    this.getGoodsList()
                }
            },

            // 添加海报
            addBanner() {
                this.$router.push("/goodsedit/add")
            },

            // 修改海报

            EditBanner( ban ) {
                this.$router.push(`/goodsedit/${ban._id}`)
            },

            // 页码变化
            onSizeChange( pages ) {
                let page = pages
                this.getGoodsList(this.CurrentPage, this.goodsClass)
            },

            // 分类变化
            SelectChange(e) {
               this.getGoodsList(this.CurrentPage, this.goodsClass)
            }
        },
    }
</script>

<style lang="scss" scoped>
 #GoodsList {
     width: 100%;
     box-sizing: border-box;
     .title {
         width: 100%;
         display: flex;
         align-items: center;
         border-bottom: 1px solid #f5f5f5;
         .btn {
             width: 300px;
            
         }
         .select {
            margin-right: 30px;
        }
     }
     .imgbox {
         width: 30px;
         height: 30px;
         overflow: hidden;
         img {
             width: 30px;
             height: 30px;
             display: block;
         }
     }
     .page {
         width: 100%;
         text-align: center;
     }
     
 }
</style>